<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>摄像头直播</title>
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <link rel="bookmark" type="image/ico" href="/favicon.ico"/>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <link href="/framework/css/console.css" rel="stylesheet"/>
    <link href="/select2/css/select2.css" rel="stylesheet"/>
    <link href="/framework/css/animate.css" rel="stylesheet"/>
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="/ckplayer/ckplayer.js"></script>
    <script src="/jquery/jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/select2/js/select2.min.js"></script>
    <script src="/framework/js/global.js"></script>
    <style type="text/css">
        .main {
            width: 100%;
        }

        .left_video {
            width: 33%;
            height: 400px;
            float: left;
        }

        .middle_video {
            width: 34%;
            height: 400px;
            float: left;
        }

        .right_video {
            width: 33%;
            height: 400px;
            float: right;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="main">
        <div id="left_video" class="left_video">

        </div>
        <div id="middle_video" class="middle_video">

        </div>
        <div id="right_video" class="right_video">

        </div>
    </div>
</form>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        var videoObject1 = {
            container: '#left_video', //“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
            autoplay: true, //自动播放
            live: true, //直播视频形式
            video: 'http://hls01open.ys7.com/openlive/af463b22b95a46018a861fa0277c5fdd.hd.m3u8' //视频地址
        };
        new ckplayer(videoObject1);

        var videoObject2 = {
            container: '#middle_video', //“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
            autoplay: true, //自动播放
            live: true, //直播视频形式
            video: 'http://hls01open.ys7.com/openlive/159e2864f79747e5b3bd6c1301a860bb.hd.m3u8' //视频地址
        };
        new ckplayer(videoObject2);


        var videoObject3 = {
            container: '#right_video', //“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
            autoplay: true, //自动播放
            live: true, //直播视频形式
            video: 'http://hls01open.ys7.com/openlive/cdb3387b95244e398c730f43322f7a66.hd.m3u8' //视频地址
        };
        new ckplayer(videoObject3);
    });
</script>